{{extend 'layout.html'}}

<script>
    // Set correct menu view.
    $('#menu-detections').addClass('active');
    $('#menu-dns_open_resolvers').addClass('active');
    // Include specific CSS
    $('head').append("<link href=\"{{=URL('static','css/dns_open_resolvers.css')}}\" rel=\"stylesheet\">");
</script>

<h3 class="title1">Detection of Open DNS Resolvers</h3>

{{if not session.logged:}}
<div class="alert alert-danger" role="alert">
   <strong>Error: </strong>You must be logged to view this page!
</div>
{{else:}}

{{if ('alert_type' in globals()) and alert_type != "":}}
<div class="alert alert-{{=alert_type}}" role="alert">
    <strong>
        {{if alert_type == "danger":}}Error:
        {{elif alert_type == "success":}}Success:
        {{elif alert_type == "info":}}Info:
        {{elif alert_type == "warning":}}Warning:
        {{pass}}
    </strong>{{=alert_message}}
</div>
{{pass}}

<!-- Options Form -->
<div class="forms inline-form widget-shadow">
    <div class="form-title">
	    <h4>Options</h4>
    </div>
    <div class="form-body">
        <div data-example-id="simple-form-inline">
            <form class="form-inline">
                <div class="form-group">
                    <label for="interval">Interval:</label>
                    <select name="interval" id="interval" class="form-control" placeholder="interval" onchange="setInterval(this.value)">
                        <option value="1" selected>Last 1 hour</option>
                        <option value="6">Last 6 hours</option>
                        <option value="12">Last 12 hours</option>
                        <option value="24">Last 24 hours</option>
                        <option value="custom">Custom</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="datetime-beginning">From:</label>
                    <input type="text" name="beginning" id="datetime-beginning" class="datetimepicker form-control">
                </div>
                <div class="form-group">
                    <label for="datetime-end">To:</label>
                    <input type="text" name="end" id="datetime-end" class="datetimepicker form-control">
                </div>
                <div class="form-group">
                    <label for="top-values">Top values:</label>
                    <select name="top-values" id="top-values" class="form-control" placeholder="top-values">
                        <option value="5">Top 5</option>
                        <option value="10" selected>Top 10</option>
                        <option value="15">Top 15</option>
                        <option value="20">Top 20</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="filter">IP Filter:</label>
                    <input type="text" name="filter" id="filter" class="form-control">
                </div>
                <button id="load-all-charts-button" type="button" class="btn btn-default" onclick="loadAllCharts();false;">Set Options</button>
            </form>
        </div>
	</div>
</div>
<!-- //Options Form -->

<!-- Top N -->
<div class="panel-info widget-shadow general chart-dns-open-top">
    <h4 class="title2">Top N Statistics</h4>
    <!-- Sources -->
    <div class="col-md-6">
        <!-- Status -->
        <div class="chart-status" id="chart-dns-open-top-resolved-status"></div>
        <!-- Main Chart -->
        <div id="chart-dns-open-top-resolved" class="zingchart"></div>
    </div>
    <!-- //Sources -->
    <!-- Resolvers -->
    <div class="col-md-6">
        <!-- Status -->
        <div class="chart-status" id="chart-dns-open-top-resolvers-status"></div>
        <!-- Main Chart -->
        <div id="chart-dns-open-top-resolvers" class="zingchart"></div>
    </div>
    <!-- //Resolvers -->
    <div class="clearfix"> </div>
</div>
<!-- //Top N -->

<!-- Table -->
<div class="panel-info widget-shadow general table-dns-stats">
    <h4 class="title2" id="table-title">All Records</h4>
    <!-- Status -->
    <div class="table-status" id="table-dns-open-status"></div>
    <!-- Main Table -->
    <div id="table-dns-open" style="display: none;">
        <table id="table-records" data-toggle="table" data-striped="true" data-pagination="true" data-search="true" data-page-size="10" data-page-list="[10, 20, 40]" data-search-text="">
            <thead>
                <tr>
                    <th data-sortable="true" data-field="res_ip">Resolver IP</th>
                    <th data-sortable="true" data-field="top_resolved_query_for_ip">Most resolved query</th>
                    <th data-sortable="true" data-field="top_resolved_data_for_ip">Data of the most resolved query</th>
                    <th data-sortable="true" data-field="top_resolved_count">Flows containing the most resolved query</th>
                    <th data-sortable="true" data-field="flows">Total Flows</th>
                    <th data-sortable="true" data-field="timestamp">First Timestamp</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<!-- //Table -->


<!-- Custom Scripts -->
<script src="{{=URL('static','js/custom/datetime_interval.js')}}"></script>
<script src="{{=URL('static','js/custom/dns_open_resolvers.js')}}"></script>
<!-- //Custom Scripts -->

{{pass}}
